<template>
    <div>
        <el-table
            :data="tableData"
            :header-cell-style="{
                background: 'rgb(255, 191, 191)',
                color: 'rgb(44,44,44)'
            }"
            stripe
            v-loading="tableLoading"
        >
            <el-table-column prop="name" label="活动名称" align="center"></el-table-column>
            <el-table-column prop="startTime" label="开始时间" align="center"></el-table-column>
            <el-table-column prop="endTime" label="结束时间" align="center"></el-table-column>
            <el-table-column prop="sort" label="排序" align="center" width="100"></el-table-column>
            <el-table-column prop="state" label="活动状态" align="center">
                <template slot-scope="scope">
                    <span>{{ ['未编辑', '未发布', '已发布', '待审批', '已驳回'][scope.row.state] }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.state === 3 && permissions.cp_activity_down" type="text" @click="activitySwitch(scope.row, 3)">撤销</el-button>
                    <el-button v-if="scope.row.state === 2 && permissions.cp_activity_down" type="text" @click="activitySwitch(scope.row, 2)">下架</el-button>
                    <el-button v-if="[4, 1, 0].includes(scope.row.state) && permissions.cp_activity_up" type="text" @click="activitySwitch(scope.row, 1)">上架</el-button>
                    <el-button v-if="[4, 1, 0].includes(scope.row.state) && permissions.cp_activity_edit" type="text" @click="onEdit(scope.row)">编辑</el-button>
                    <el-button v-if="[4, 1, 0].includes(scope.row.state) && permissions.cp_activity_del" type="text" @click="deleteProduct(scope.row)">删除</el-button>
                    <el-button type="text" @click="onOpen(scope.row)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            class="madp-pagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="page.current"
            :page-sizes="[10, 20, 30, 50, 100]"
            :page-size="page.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
        ></el-pagination>
    </div>
</template>
<script>
import storeApi from '@/api/store/store.js';
import { mapGetters } from 'vuex';
export default {
    props: {
        searchT: {
            type: String,
            default: ''
        },
        tableType: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            // 表格数据
            tableData: [],
            // 分页
            page: {
                current: 1,
                size: 10,
                total: 0
            },
            // loading
            tableLoading: false
        };
    },
    computed: {
        ...mapGetters({
            permissions: 'permissions'
        })
    },
    created() {
        this.getList();
    },
    methods: {
        // 点击按钮
        activitySwitch(data, val) {
            // 3 撤销、 2 下架、 1 上架
            if ([3, 2].includes(val)) {
                this.$confirm(`是否确定${['下架', '撤销'][val - 2]}该活动?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        storeApi
                            .downProduct({
                                prodId: data.id
                            })
                            .then((res) => {
                                if (res.data.code != 0) return;
                                this.$message({
                                    type: 'success',
                                    message: ['下架', '撤销'][val - 2] + '成功!'
                                });
                                this.$emit('handleUpdate');
                            });
                    })
                    .catch(() => {});
            } else {
                this.$confirm(`是否确定上架该活动?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        storeApi
                            .upProduct({
                                prodId: data.id
                            })
                            .then((res) => {
                                if (res.data.code != 0) return;
                                this.$message({
                                    type: 'success',
                                    message: '上架成功!'
                                });
                                this.$emit('handleUpdate');
                            });
                    })
                    .catch(() => {});
            }
        },
        // 分页
        handleSizeChange(val) {
            this.page.size = val;
            this.getList(1);
        },
        handleCurrentChange(val) {
            this.page.current = val;
            this.getList(1);
        },
        // 查询
        getList(data) {
            if (!data) this.page.current = 1;
            this.tableLoading = true;
            storeApi
                .productList({
                    name: this.searchT,
                    type: 2,
                    state: this.tableType,
                    current: this.page.current,
                    size: this.page.size
                })
                .then((res) => {
                    this.tableData = res.data.data.records;
                    if (this.tableData.length == 0 && this.page.current > 1) {
                        this.page.current--;
                        this.getList(1);
                        return;
                    }
                    this.page.total = res.data.data.total;
                    this.tableLoading = false;
                })
                .catch(() => {
                    this.tableLoading = false;
                });
        },
        // 删除活动
        deleteProduct(info) {
            this.$confirm(`是否确定删除该活动?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    storeApi
                        .deleteProduct({
                            prodId: info.id
                        })
                        .then((res) => {
                            if (res.data.code != 0) return;
                            this.getList(1);
                            this.$message({
                                type: 'success',
                                message: '删除成功'
                            });
                        });
                })
                .catch(() => {});
        },
        // 点击编辑
        onEdit(info) {
            storeApi
                .productInfo({
                    prodId: info.id
                })
                .then((res) => {
                    let data = res.data.data;
                    this.$emit('handleEdit', data);
                });
        },
        // 点击查看
        onOpen(info) {
            storeApi
                .productInfo({
                    prodId: info.id
                })
                .then((res) => {
                    let data = res.data.data;
                    this.$emit('handleView', data);
                });
        }
    }
};
</script>
